<template>
  <div>
    <div
      class="side_btn_box bg-#2979ff"
      :style="{ cursor: isDragging ? 'move' : 'pointer' }"
      id="dragElement"
    >
      <i-ep-circle-plus color="white" />
      <!-- 插槽出口 -->
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
const emit = defineEmits(["click-button"]);
const isDragging = ref(false);
/**侧边栏按钮上下拖拽功能部分 */
const SideBtnDrag = () => {
  const dragElement = document.getElementById("dragElement") as HTMLElement;
  let startY = 0;
  let currentY = 0;

  function handleMouseMove(event: any) {
    isDragging.value = true;
    currentY = event.clientY;
    // 移动的距离
    const distance = currentY - startY;
    let currentTop =
      parseInt(dragElement.style.top) || dragElement.offsetTop || 0;
    const viewportHeight = window.innerHeight;
    // 兼容边界部分
    if (currentTop <= 0) {
      currentTop = 0;
    } else if (currentTop + 40 > viewportHeight) {
      currentTop = viewportHeight - 40;
    }
    dragElement.style.top = currentTop + distance + "px";
    startY = currentY;
    dragElement.removeEventListener("click", handleClick);
  }

  function handleMouseUp() {
    isDragging.value = false;
    document.removeEventListener("mousemove", handleMouseMove);
    document.removeEventListener("mouseup", handleMouseUp);
  }

  dragElement.addEventListener("mousedown", (event) => {
    startY = event.clientY;
    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);
    dragElement.addEventListener("click", handleClick);
  });
};

onMounted(() => {
  SideBtnDrag();
});

const handleClick = () => {
  emit("click-button");
};
</script>

<style scoped lang="scss">
.side_btn_box {
  position: fixed;
  right: 0;
  width: 43px;
  height: 43px;
  border-radius: 6px 0 0 6px;
  top: 200px;
  z-index: 200;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  cursor: pointer;
  font-size: 18px;

  svg {
    margin-top: 10px;
    margin-left: 10px;
  }

  @keyframes slide-in {
    70% {
      // opacity: 0.5;
      scale: 0.4;
    }

    100% {
      // opacity: 1;
      scale: 1;
    }
  }

  &:hover {
    // box-shadow: var(--el-box-shadow-dark);

    .el-icon {
      animation: slide-in 0.3s ease-in-out;
    }
  }
}
</style>
